<template>
  <a-config-provider :theme="themeConfig" :locale="antdLocale">
    <a-spin :spinning="spinning" tip="稍等片刻，拼命加载中..." size="large">
      <RouterView />
    </a-spin>
  </a-config-provider>
</template>
<script setup lang="ts">
import { provide, computed } from 'vue'
import dayjs from 'dayjs'
import { theme } from 'ant-design-vue'
import { messages } from '@/i18n'
import { themeColors } from '@/theme/color'
import { useAppConfigStore } from '@/store/modules/app-store'
import { useLoadingStore } from '@/store/modules/loading-store'
const appConfigStore = useAppConfigStore()
const loadingStore = useLoadingStore()

// 设置语言
const antdLocale = computed(() => messages[appConfigStore.$state.language].antdLocale)
const dayjsLocale = computed(() => messages[appConfigStore.$state.language].dayjsLocale)
dayjs.locale(dayjsLocale.value)

// 全局组件大小
const componentSize = computed(() => appConfigStore.$state.componentSize)

// 主题颜色索引
const colorIndex = computed(() => {
  return appConfigStore.$state.colorIndex
})

// 全局主题配置

const themeConfig = computed(() => {
  const themeColor = themeColors[unref(colorIndex)]
  return {
    algorithm: appConfigStore.$state.compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm,
    token: {
      fontSize: appConfigStore.$state.fontSize,
      colorPrimary: themeColor.primaryColor,
      colorLink: themeColor.primaryColor,
      colorLinkActive: themeColor.activeColor,
      colorLinkHover: themeColor.hoverColor,
      colorIcon: themeColor.primaryColor,
      borderRadius: appConfigStore.$state.borderRadius
    },
    components: {
      Button: {
        colorLink: themeColor.primaryColor,
        colorLinkActive: themeColor.activeColor,
        colorLinkHover: themeColor.hoverColor
      },
      Icon: {
        colorIcon: themeColor.primaryColor
      }
    }
  }
})

// 全局loading状态
const spinning = computed(() => {
  return loadingStore.$state.loading
})

const compactModeClass = computed(() => (appConfigStore.$state.compactFlag ? 'font-size: 12px;' : 'font-size: 14px;'))

provide('compactModeClass', compactModeClass)
</script>
